<template>
  <div class="account-layout" style="height: 100vh;overflow: hidden;overflow-y: auto;">

    <div class="header">
      <div class="flex header-main">
        <el-image :src="logoImg" class="img pointer" style=" width: 150px;height: 25px;" @click="$router.replace({path:'/home'})" />
        <el-button v-if="!token" type="primary">
          <router-link class="sign" to="/Login?type=login">登录</router-link>
          /
          <router-link class="sign up" to="/Login?type=register">注册</router-link>
        </el-button>
        <el-button v-else type="primary">进入投放后台</el-button>
      </div>
    </div>

    <div class="account-main flex">
      <div class="lt">
        <div v-for="item in options" :key="item.name" :class="item.name===activeName?'item active':'item'" @click="changeType(item.name)">
          {{ item.label }}
        </div>
      </div>
      <div class="rt scroll-box" v-html="info">

      </div>
    </div>

  </div>
</template>

<script>
  import {
    getToken
  } from '@/utils/auth.js'

  // 投放协议
  import put from '@/assets/protocol/put.js'
  // 隐私协议
  import privacy from '@/assets/protocol/privacy.js'
  // 使用条款
  import employ from '@/assets/protocol/employ.js'
  export default {
    components: {},
    data() {
      return {
        logoImg: require('@/assets/images/login/logo.png'),
        activeName: 'putIn',
        options: [{
            label: '3YData投放协议',
            name: 'putIn',
            info: put
          },
          {
            label: '3YData使用条款',
            name: 'employ',
            info: employ
          },
          {
            label: '3YData隐私协议',
            name: 'privacy',
            info: privacy
          }

        ]

      }
    },

    computed: {
      token: function() {
        return getToken()
      },
      info: function() {
        const str = this.activeName ? this.activeName : 'putIn'
        const index = this.options.findIndex(item => {
          return item.name === str
        })
        return this.options[index].info
      }
    },

    created() {
      if (this.$route.query.type) {
        this.activeName = this.$route.query.type
        this.$nextTick(() => {
          this.$forceUpdate()
        })
      } else {
        this.changeType('putIn')
      }
    },
    methods: {
      changeType(type) {
        if (type === this.activeName) return false
        this.activeName = type
        this.$router.replace({
          name: this.$route.name,
          query: {
            type
          }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: 70px;
    background: #FFFFFF;
    box-shadow: 0px 0px 6px 0px rgba(187, 187, 187, 0.4);

    .header-main {
      width: 1030px;
      margin: 0 auto;
      height: 70px;

      .img {
        width: 150px;
        height: 25px;
      }
    }
  }

  .account-layout {
    padding-top: 100px;

    .account-main {
      width: 1030px;
      margin: 0 auto;
      justify-content: space-between;
      align-items: flex-start;

      .lt {
        width: 200px;
        padding: 36px 0;
        background: #FFFFFF;
        border: 1px solid #EEEEEE;
        border-radius: 10px;

        .item {
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          text-indent: 33px;
          font-family: PingFang SC !important;
          font-weight: 400;
          color: #333333;
          cursor: pointer;

          &.active {
            background: #3596FC;
            color: #FFFFFF;
          }
        }

      }

      .rt {
        flex: 1;
        margin-left: 24px;
        max-height: calc(100vh - 124px);

        ::v-deep p {
          line-height: 28px !important;
          margin-bottom: 10px !important;

        }

        ::v-deep #title-1-1,
        ::v-deep#title-1-2,
        ::v-deep#title-1-3,
        ::v-deep#title-1-3,
        ::v-deep#title-1-4,
        ::v-deep#title-1-5,
        ::v-deep#title-1-6,
        ::v-deep#title-1-7,
        ::v-deep#title-1-8 {

          margin-top: -110px !important;
          padding-top: 110px;
        }

        ::v-deep a {
          color: #0085FF !important;
        }
      }
    }
  }
</style>
